<template>
	<view class="specialService">
		<view class="service_wrap">
			<getPhoneNumber class="service_list" v-for="item in serviceBtnData" :key="item.id" :dataSource="item.dataSource">
				<view class="service_box">
					<view class="left">
						<view class="service_tit">{{ item.name }}</view>
						<text class="service_tag">{{ item.tag }}</text>
					</view>
					<view class="service_body">
						<view class="service_icon">
							<image :src="`${constant.imgUrl}${item.img}`"></image>
						</view>
					</view>
				</view>
			</getPhoneNumber>
		</view>
	</view>
</template>

<script>

import getPhoneNumber from '@/pages/components/getPhoneNumber'

export default {
	components: {
		getPhoneNumber
	},
	data() {
		return {
			constant: this.$constant,
			// 服务按钮数据
			serviceBtnData: [
				{
					name: '家具报价',
					tag: '智能报价',
					img: 'common/calculator_img.png',
					path: 'Inteoffer',
					dataSource: '智能报价'
				},
				{
					name: '家居风水',
					tag: '免费测试',
					img: 'common/gossip.png',
					path: 'ShopDivination',
					dataSource: 'fenshui'
				}
				// ,
				// {
				//     name: '建材商城',
				//     tag: '爆款',
				//     img: homeImg,
				//     path: 'shop'
				// }
			],
			p_share_user_id: '',
			username: '',
			userInfo: ''
		}
	}
}
</script>
<style lang="scss" scope>
	// button {
	// 	position: static !important;
	// }
	.specialService {
		width: 100vw;

		.service_wrap {
			display: flex;
			align-items: center;
			width: calc(100% - 40px);
			margin: 30px 20px 20px;
			button {
				text-align: left;
			}

			.service_list {
				width: 50%;
				margin: 0 10px;
				padding: 30px 20px 30px;
				background-color: #fff;
				box-shadow: 0 0 10px #ededed;
				border-radius: 20px;
				position: relative;
				.service_box {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
				}

				.service_tit {
					font-size: 28px;
					margin-bottom: 14px;
				}
					.service_tag {
						padding: 4px 10px;
						// padding: 4px;
						border-top-left-radius: 18px;
						border-bottom-right-radius: 18px;
						background-color: #ffd11a;
						font-size: 26px;
						display: flex;
						justify-content: center;
						align-items: center;

					}
				.service_body {
					// display: flex;
					// align-items: flex-start;
					// justify-content: space-between;

					.service_icon {
						width: 70px;
						height: 70px;
						margin-top: 16px;
						// position: absolute;
						// top: 16px;
						// right: 16px;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
